<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>憩息阁网上书城</title>
    <!--引入外部样式-->
    <link type="text/css" rel="stylesheet" href="./css/homePage.css"/>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
<!--点击修改密码-->
<div style="position: relative">
    <div class="pwd_bg_back"
         style="position: absolute;width: 1300px;height:650px;margin: 10px auto;left: calc(50% - 600px);background:rgba(255,255,255,0.1);z-index: 10;display: none">
        <div class="pwd_right">
            <div class="pwd_back"><img src="./images/backToCart.png" alt=""></div>
            <div class="pwd_header"><img src="./images/touxiang.png" alt="用户头像"><span
                    style="font-size: 28px;font-weight: bold" id="user_update">用户名</span></div>
            <div class="pwd_content">
                <div class="pwd_msg">
                    <div><span>原密码：</span><input type="password" id="oldPwd"></div>
                    <br><br>
                    <div><span>新密码：</span><input type="password" id="newPwd1"></div>
                    <br><br>
                    <div id="pwd_ipt"><span>确认新密码：</span><input type="password" id="newPwd2"></div>
                    <br><br>
                    <button id="pwd_but">修改</button>
                </div>
            </div>
        </div>
    </div>
</div>


<!--点击简介时-->
<div class="bg_hoverWindow"
     style="position: absolute;width: 1300px;height:800px;margin: 60px auto;left: calc(50% - 600px);background:rgba(255,255,255,0.1);z-index: 10;display:none">
    <div id="hoverWindow" class="hoverWindow_css">
        <img src="images/backToCart.png" alt="" id="cancel_img" title=" 返回主页面 ">
        <div id="img_data"><img src="images/bookImg.png" title="相关图书"></div>
        <div id="text">
            <p>简介:</p>
            <div id="detailData"></div>
        </div>
    </div>
</div>


<!--点击个人中心时显示个人中心页面-->
<div style="position: relative">
    <div class="bg_back"
         style="position: absolute;width: 1300px;height:650px;margin: 10px auto;left: calc(50% - 600px);background:rgba(255,255,255,0.1);z-index: 10;display: none">
        <div class="personal_center">
            <div class="back"><img src="./images/backToCart.png" alt=""></div>
            <div class="header"><img src="./images/touxiang.png" alt="用户头像"><span
                    style="font-size: 28px;font-weight: bold" id="user">用户名</span></div>
            <div class="content">
                <div class="msg">
                    <p id="isAdmin"></p>
                    <p>绑定手机号：13879489365</p>
                    <p>我的邮箱：1357924680@qq.com</p>
                    <p id="date"></p>
                    <p>我的余额：521.00</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="window">
    <div class="first">
        <div class="head">
            <div class="head-left">
                <img src="images/logo_register.png" alt="" id="logo">
                <span class="span1">_憩息阁_</span>
                <span class="span2">网上书城</span>
            </div>

            <!--        登录和注册-->
            <div class="head-right" id="loginAfter">
                <a href="/login.html"> 登 录 </a>
                <span style="font-size: 25px">  /</span>
                <a href="/register.html"> 注 册 </a>
            </div>

            <div class="head-right" id="loginLater">
                <!--填写用户名-->
                <span style="color: #01b6eb; font-size: 25px; font-family: emoji;" id="admin">  </span>
                <span style="font-size: 25px; color: #000000; font-style: italic; " id="hello">    </span>
                <span style="font-size: 25px" id="left">|</span>

                <!--                下拉菜单-->
                <div class="nav1">
                    <div class="nav1Title"><img src="images/my.png" alt=""></div>
                    <div class="nav1Box">
                        <li id="myOrders"> 个人中心</li>
                        <li id="cart"> 购 物 车</li>
                        <li id-="myOrder"><a href="/OrderDetail.html">我的订单</a></li>
                        <!--                        <li id="updateBook">  </li>-->
                        <li id="up_pwd"> 修改密码</li>
                        <li id="logout"> 登 出</li>
                    </div>
                </div>
                <span style="font-size: 25px" id="right">|  </span>
                <a class="shop" href="Shop.html" style="font-size: 25px; color: #000000; "
                   id="enterShopping">进入商城</a>
            </div>
        </div>


        <!--内容-->
        <div class="books_list">
            <div class="ipt" style="position: relative; ">
                <div>
                    <div>
                        <input type="text" name="queryName" value="" class="query_ipt" id="query_ipt"
                               placeholder="请输入书名">
                        <button type="submit" id="query_btn"><img src="images/query1.png" alt=""
                                                                  style="width: 25px; height: 25px;"></button>
                        <br>
                    </div>
                </div>

                <span id="cartIsEmpty" style="color: #01b6eb;font-size: 20px;display: none;font-family: Arial;">亲，您的购物车还空着哦！</span>
                <span id="cartDetail" style="display: none">
                    <span>目前已添加: </span>
                    <span id="addBookSum"></span>
                    <span>件</span><br>
                    <span>上一次添加:</span>
                    <span>《 </span>
                    <span id="addBookName">  </span>
                    <span> 》</span>
                </span>
            </div>

            <!--遍历书籍-->

            <div id="bookTable">
                <div class="b_list">
                    <div class="img_div">
                        <img src="images/bookImg.png" alt="">
                    </div>
                    <div class="book_info">
                        <div class="bookName">书名:</div>
                        <div class="author">作者:</div>
                        <div class="price">价格:</div>
                        <div class="stock">库存:</div>
                        <div class="publisher">出版社:</div>
                        <div class="bookId">编号:</div>
                        <span><button value="书本详情" class="btn1"><a href="#">  书 本 详 情  </a></button>
                        <button value="加入购物车" class="btn" bookId="123"><a href="">  加 入 购 物 车  </a></button>
                    </span>
                    </div>
                </div>
            </div>


            <div class="page">
                <!--查询结果为空时-->

                <div id="back" style="display: none">
                    <span style="font-size: 30px">亲，书城还没有这本书哦！</span>
                    <span><a href="" style="position: relative; top: 15px; left: 40px; "><img src="images/返回.png" alt="" title=" 返 回 "></a></span>
                </div>


                <!--                查询结果不为空时-->
                <div id="resultNotEmpty" style="display: block">
                    <input type="text" id="designatePage" placeholder=" 指定页码 ">
                    <a href="#"> <img src="images/go.png" alt="" id="go"></a>


                    <a href="#"><img src="images/HomePage.png" alt="" title=" 首  页 " width="50px" height="50px"
                                     id="firstPage"></a>

                    <a href="#" id="prePage_a">
                        <img src="images/PrePage.png" alt="" id="prePage" title=" 上 一 页 "> </a>
                    <span style=" color: #5f625f;  position: absolute; left: 500px; top:2px ">当前页码  : </span>
                    <span style="font-size: 25px; color: #01b6eb;  position: absolute; top:2px; left: 590px"
                          id="pageNo"> </span>
                    <a href="#" id="nextPage_a"><img
                            src="images/NextPage.png" alt="" id="nextPage" title=" 下 一 页 "> </a>

                    <a href="#"><img src="images/LastPage.png" alt="" title=" 尾  页 " id="lastPage"></a>

                    <span style="position: absolute; left: 1000px; top: 2px">
                        <span style="font-family: Arial; color: #5f625f; margin-left: 20px; font-size: 18px;word-spacing: 0.5em"> 共： </span>
                        <span style="font-size: 25px; color: #01b6eb; position: absolute; right: -10px"
                              id="pageCnt">     </span>
                        <span style="font-family: Arial; color: #5f625f;position: absolute;right: -35px"> 页 </span>
                    </span>
                </div>

            </div>


            <!--        联系我们-->
            <div class="foot">
                <div id="foot-value">
                    <span>_憩息阁_书城</span><br>
                    <span>有问题请联系我们qq邮箱:1839183810@qq.com,期待您的回复</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //对页面初始化
    axios({
        url: "/getBooksByName",
        method: 'get'
    }).then(resp => {
        sessionStorage.setItem("page", JSON.stringify(resp.data))
        var bookList = resp.data.item;
        var tableData = "";

        for (var i = 0; i < bookList.length; i++) {
            tableData += "<div class=\"b_list\" >\n" +
                "                <div class=\"img_div\">\n" +
                "                    <img src=\"images/bookImg.png\" alt=\"\" >\n" +
                "                </div>\n" +
                "                <div class=\"book_info\">\n" +
                "                    <div class=\"bookName\">书名: " + bookList[i].bookName + "</div>\n" +
                "                    <div class=\"author\">作者: " + bookList[i].author + "</div>\n" +
                "                    <div class=\"price\">价格: " + bookList[i].price + "</div>\n" +
                "                    <div class=\"stock\">库存: " + bookList[i].stock + "</div>\n" +
                "                    <div class=\"publisher\">出版社: " + bookList[i].publisher + "</div>\n" +
                "                    <div class=\"bookId\">编号: " + bookList[i].bookId + "</div>\n" +
                "                    <span><button value=\"书本详情\" class=\"btn1\"><a href=\"#\">  书 本 详 情  </a></button>\n" +
                "                        <button value=\"加入购物车\" class=\"btn\" ><a href=\"#\">  加 入 购 物 车  </a></button>\n" +
                "                    </span>\n" +
                "                </div>\n" +
                "            </div>"
        }


        // 设置表格内容
        document.getElementById("bookTable").innerHTML = tableData;


        //解决返回或者返回主页面时的一些bug
        //购物车中书本的总数
        var addBookSum = document.getElementById("addBookSum");
        addBookSum.innerText = JSON.parse(sessionStorage.getItem("totalCnt"));
        //购物车最后添加的书名
        var addBookName = document.getElementById("addBookName");
        addBookName.innerText = sessionStorage.getItem("lastName")
        var cartIsEmpty = document.getElementById("cartIsEmpty");
        var cartDetail = document.getElementById("cartDetail");

        const cart = JSON.parse(sessionStorage.getItem("cart"));
        if (JSON.parse(sessionStorage.getItem("totalCnt")) != null && cart != null && cart.totalCnt != 0) {
            cartDetail.style.display = 'block';
            cartIsEmpty.style.display = 'none';
        }


        //将page中的页码，总页数显示
        //pageNo
        var pageNo = document.getElementById("pageNo");
        pageNo.innerText = JSON.parse(sessionStorage.getItem("page")).pageNo;
        //pageCnt
        var pageCnt = document.getElementById("pageCnt");
        pageCnt.innerText = JSON.parse(sessionStorage.getItem("page")).pageCnt;


        //对每个btn添加属性"bookId", 目的：点击时可以获取该book的Id
        var btn = document.getElementsByClassName("btn");
        for (var i = 0; i < btn.length; i++) {
            btn[i].setAttribute("bookId", bookList[i].bookId);
        }


        // 对点击“加入购车”btn做出判断
        var btn = document.getElementsByClassName("btn");
        for (var i = 0; i < btn.length; i++) {
            btn[i].addEventListener("click", function () {
                if (user == null) {
                    alert("请先登录！");
                } else {
                    var bookId = this.getAttribute("bookId");
                    var cart = JSON.parse(sessionStorage.getItem("cart"));
                    axios({
                        url: "/addBookToCart",
                        method: 'post',
                        data: {
                            "bookId": bookId,
                            "cart": cart
                        }
                    }).then(resp => {
                        sessionStorage.setItem("cart", JSON.stringify(resp.data));
                        var items = resp.data.items
                        sessionStorage.setItem("lastName", JSON.stringify(items[bookId].name))
                        sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))

                        //购物车中书本的总数
                        var addBookSum = document.getElementById("addBookSum");
                        addBookSum.innerText = JSON.parse(sessionStorage.getItem("totalCnt"));

                        //购物车最后添加的书名
                        var addBookName = document.getElementById("addBookName");
                        addBookName.innerText = sessionStorage.getItem("lastName")

                        var cartIsEmpty = document.getElementById("cartIsEmpty");
                        var cartDetail = document.getElementById("cartDetail");
                        if (JSON.parse(sessionStorage.getItem("totalCnt") != null)) {
                            cartDetail.style.display = 'block';
                            cartIsEmpty.style.display = 'none';
                        }
                    })
                }
            })
        }


        //对每一个详情按钮绑定事件
        var btn1 = document.getElementsByClassName("btn1");
        for (var i = 0; i < btn1.length; i++) {
            btn1[i].setAttribute("index", i);
            btn1[i].addEventListener("click", function () {
                var j = this.getAttribute("index")
                document.getElementById("detailData").innerHTML = bookList[j].detail;
                /*悬浮窗口的显示,需要将display变成block*/
                document.getElementById("hoverWindow").style.display = "block";
                document.querySelector(".bg_hoverWindow").style.display = "block"
                /*将背景变暗*/
                document.getElementById("window").setAttribute("class", "window_css");
            })
        }
    })

    //点击修改密码显示修改密码窗口

    const pw_bg_back = document.querySelector('.pwd_bg_back');
    const up_pwd = document.querySelector('#up_pwd');
    const pw_right = document.querySelector('.pwd_right');
    up_pwd.addEventListener("click", function () {
        pw_bg_back.style.display = "block";
        pw_right.style.display = "block";
        var user_update = document.getElementById("user_update");
        user_update.innerHTML = JSON.parse(sessionStorage.getItem("user")).userName;
    });
    const pwd_back = document.querySelector('.pwd_back');
    pwd_back.addEventListener('click', function () {
        pw_right.style.display = "none";
        pw_bg_back.style.display = "none";
    })

    // 点击修改时修改密码
    const up_but = document.querySelector("#pwd_but");
    up_but.addEventListener("click", function () {
        var oldPwd = document.querySelector("#oldPwd").value;
        var newPwd1 = document.querySelector("#newPwd1").value;
        var newPwd2 = document.getElementById("newPwd2").value
        var userName = JSON.parse(sessionStorage.getItem("user")).userName;
        axios({
            method: "post",
            url: '/updateByName',
            data: {
                "userName": userName,
                "oldPwd": oldPwd,
                "newPwd1": newPwd1,
                "newPwd2": newPwd2
            }
        }).then(resp => {
            alert("修改结果：" + resp.data + "!");
            if (resp.data == "修改成功") {
                sessionStorage.removeItem("user");
                sessionStorage.removeItem("page");
                sessionStorage.removeItem("lastName");
                sessionStorage.removeItem("cart");
                sessionStorage.removeItem("totalCnt");
                sessionStorage.removeItem("isAdmin");
                alert("身份已过期，请重新登录！");
                location.href = "/login.html";
            }
        })
    })

    //点击个人中心时显示个人信息窗口
    const bg_back = document.querySelector('.bg_back');//获取个人中心外的盒子背景
    const myOrders = document.querySelector('#myOrders'); //获取个人中心这个元素
    const personal_center = document.querySelector('.personal_center') //获取个人中心页面
    myOrders.addEventListener("click", function () {
        var user = document.getElementById("user");
        var date = document.getElementById("date");
        var isAdmin = document.getElementById("isAdmin")
        if (sessionStorage.getItem("isAdmin") != null) {
            isAdmin.innerText = "身份：管理员";
        } else {
            isAdmin.innerText = "身份：普通用户";
        }
        user.innerText = JSON.parse(sessionStorage.getItem("user")).userName;
        date.innerText = "生日：" + JSON.parse(sessionStorage.getItem("user")).userDate;
        personal_center.style.display = "block";
        bg_back.style.display = "block"
    })
    //完成页面返回功能
    const back = document.querySelector('.back');
    back.addEventListener('click', function () {
        personal_center.style.display = "none";
        bg_back.style.display = "none";
    })


    //对详情返回图片绑定点击事件
    var cancel_img = document.getElementById("cancel_img");
    cancel_img.addEventListener('click', function () {
        /*关闭悬浮窗口,需要将display变成none*/
        document.getElementById("hoverWindow").style.display = "none";
        document.querySelector(".bg_hoverWindow").style.display = "none"
        /*将背景恢复*/
        document.getElementById("window").removeAttribute("class", "window_css");
    });


    //对登录前和登录后进行改变样式
    var user = JSON.parse(sessionStorage.getItem("user"))

    if (user !== null) {
        var cartIsEmpty = document.getElementById("cartIsEmpty");
        var loginLater = document.getElementById('loginLater');
        var loginAfter = document.getElementById('loginAfter');
        var admin = document.getElementById('admin');
        admin.innerText = user.userName;
        loginAfter.style.display = 'none';
        cartIsEmpty.style.display = 'block';
        loginLater.style.display = 'block';

    }


    //对时间做出判断，显示不同的问候语
    var hello = document.getElementById("hello");
    var h = new Date().getHours();
    if (h < 6) {
        hello.innerText = " 凌晨好！ ";
    } else if (h < 9) {
        hello.innerText = " 早上好！ ";
    } else if (h < 12) {
        hello.innerText = " 上午好！ ";
    } else if (h < 14) {
        hello.innerText = " 中午好！";
    } else if (h < 17) {
        hello.innerText = " 下午好！ ";
    } else if (h < 19) {
        hello.innerText = " 傍晚好！ ";
    } else if (h < 22) {
        hello.innerText = " 晚上好！ ";
    } else {
        hello.innerText = " 夜里好！ ";
    }

    //再次判断是否要注销
    var logout = document.getElementById("logout");
    logout.addEventListener('click', function () {
        if (confirm(" 确认是否登出！ ")) {
            axios({
                url: "/logout",
                method: "post",
            }).then(resp => {
                if (resp.data === 'ok') {
                    sessionStorage.removeItem("user");
                    sessionStorage.removeItem("page");
                    sessionStorage.removeItem("lastName");
                    sessionStorage.removeItem("cart");
                    sessionStorage.removeItem("totalCnt");
                    sessionStorage.removeItem("isAdmin")
                    location.href = "/Admin.html"
                }
            })
        }
    })

    // 下拉菜单实现
    var nav1 = document.getElementsByClassName('nav1')[0];
    var nav1Box = document.getElementsByClassName('nav1Box')[0];
    var nav1Title = document.getElementsByClassName('nav1Title')[0];
    nav1.addEventListener('mouseover', function () {
        nav1.style.height = "169px";
        nav1Box.style.display = 'block';

    });
    nav1.addEventListener('mouseout', function () {
        nav1.style.height = "0px";
        nav1Box.style.display = 'none';

    });


    //将访问到的pageNo传给下一个页面，保证用户点击返回主页时直接在以前访问的位置，对cart
    var cart = document.getElementById('cart');
    cart.addEventListener('click', function () {
        var Local = "";
        location.href = "/Cart.html";
    })


    //给更新图书绑定事件
    // var updateBook = document.getElementById("updateBook");
    // updateBook.addEventListener('click', function () {
    //     location.href = "/UpdateBooks.html";
    // })


    /*点击搜索按钮重新插入books*/

    //点击事件
    var query_btn = document.getElementById('query_btn');
    var query_ipt = document.getElementById('query_ipt');
    query_btn.addEventListener('click', function () {
        var queryName = query_ipt.value;
        axios({
            url: "/getBooksByName?queryName=" + queryName,
            method: "get"
        }).then(resp => {
            sessionStorage.setItem("page", JSON.stringify(resp.data))

            var bookList = resp.data.item;
            var tableData = "";

            //根据查询后的结果做出样式改变
            if (bookList.length === 0) {
                document.getElementById("back").style.display = 'block';
                document.getElementById("resultNotEmpty").style.display = 'none';
            }else {
                document.getElementById("back").style.display = 'none';
                document.getElementById("resultNotEmpty").style.display = 'block';
            }

            //根据查询后的结果做出样式改变
            for (var i = 0; i < bookList.length; i++) {
                tableData += "<div class=\"b_list\" >\n" +
                    "                <div class=\"img_div\">\n" +
                    "                    <img src=\"images/bookImg.png\" alt=\"\" >\n" +
                    "                </div>\n" +
                    "                <div class=\"book_info\">\n" +
                    "                    <div class=\"bookName\">书名: " + bookList[i].bookName + "</div>\n" +
                    "                    <div class=\"author\">作者: " + bookList[i].author + "</div>\n" +
                    "                    <div class=\"price\">价格: " + bookList[i].price + "</div>\n" +
                    "                    <div class=\"stock\">库存: " + bookList[i].stock + "</div>\n" +
                    "                    <div class=\"publisher\">出版社: " + bookList[i].publisher + "</div>\n" +
                    "                    <div class=\"bookId\">编号: " + bookList[i].bookId + "</div>\n" +
                    "                    <span><button value=\"书本详情\" class=\"btn1\"><a href=\"#\">  书 本 详 情  </a></button>\n" +
                    "                        <button value=\"加入购物车\" class=\"btn\" ><a href=\"#\">  加 入 购 物 车  </a></button>\n" +
                    "                    </span>\n" +
                    "                </div>\n" +
                    "            </div>"
            }

            // 设置表格内容
            document.getElementById("bookTable").innerHTML = tableData;


            //解决返回或者返回主页面时的一些bug
            //购物车中书本的总数
            var addBookSum = document.getElementById("addBookSum");
            addBookSum.innerText = JSON.parse(sessionStorage.getItem("totalCnt"));
            //购物车最后添加的书名
            var addBookName = document.getElementById("addBookName");
            addBookName.innerText = sessionStorage.getItem("lastName")
            var cartIsEmpty = document.getElementById("cartIsEmpty");
            var cartDetail = document.getElementById("cartDetail");

            const cart = JSON.parse(sessionStorage.getItem("cart"));
            if (JSON.parse(sessionStorage.getItem("totalCnt")) != null && cart != null && cart.totalCnt != 0) {
                cartDetail.style.display = 'block';
                cartIsEmpty.style.display = 'none';
            }


            //将page中的页码，总页数显示
            //pageNo
            var pageNo = document.getElementById("pageNo");
            pageNo.innerText = JSON.parse(sessionStorage.getItem("page")).pageNo;
            //pageCnt
            var pageCnt = document.getElementById("pageCnt");
            pageCnt.innerText = JSON.parse(sessionStorage.getItem("page")).pageCnt;


            //对每个btn添加属性"bookId", 目的：点击时可以获取该book的Id
            var btn = document.getElementsByClassName("btn");
            for (var i = 0; i < btn.length; i++) {
                btn[i].setAttribute("bookId", bookList[i].bookId);
            }


            // 对点击“加入购车”btn做出判断
            var btn = document.getElementsByClassName("btn");
            for (var i = 0; i < btn.length; i++) {
                btn[i].addEventListener("click", function () {
                    if (user == null) {
                        alert("请先登录！");
                    } else {
                        var bookId = this.getAttribute("bookId");
                        var cart = JSON.parse(sessionStorage.getItem("cart"));
                        axios({
                            url: "/addBookToCart",
                            method: 'post',
                            data: {
                                "bookId": bookId,
                                "cart": cart
                            }
                        }).then(resp => {
                            sessionStorage.setItem("cart", JSON.stringify(resp.data));
                            var items = resp.data.items
                            sessionStorage.setItem("lastName", JSON.stringify(items[bookId].name))
                            sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))

                            //购物车中书本的总数
                            var addBookSum = document.getElementById("addBookSum");
                            addBookSum.innerText = JSON.parse(sessionStorage.getItem("totalCnt"));

                            //购物车最后添加的书名
                            var addBookName = document.getElementById("addBookName");
                            addBookName.innerText = sessionStorage.getItem("lastName")

                            var cartIsEmpty = document.getElementById("cartIsEmpty");
                            var cartDetail = document.getElementById("cartDetail");
                            if (JSON.parse(sessionStorage.getItem("totalCnt") != null)) {
                                cartDetail.style.display = 'block';
                                cartIsEmpty.style.display = 'none';
                            }
                        })
                    }
                })
            }

            //对每一个详情按钮绑定事件
            var btn1 = document.getElementsByClassName("btn1");
            for (var i = 0; i < btn1.length; i++) {
                btn1[i].setAttribute("index", i);
                btn1[i].addEventListener("click", function () {
                    var j = this.getAttribute("index")
                    document.getElementById("detailData").innerHTML = bookList[j].detail;
                    /*悬浮窗口的显示,需要将display变成block*/
                    document.getElementById("hoverWindow").style.display = "block";
                    document.querySelector(".bg_hoverWindow").style.display = "block"
                    /*将背景变暗*/
                    document.getElementById("window").setAttribute("class", "window_css");
                })
            }
        })
    })



    //键盘事件
    query_ipt.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            var queryName = query_ipt.value;
            axios({
                url: "/getBooksByName?queryName=" + queryName,
                method: "get"
            }).then(resp => {
                sessionStorage.setItem("page", JSON.stringify(resp.data))

                var bookList = resp.data.item;
                var tableData = "";

                //根据查询后的结果做出样式改变
                if (bookList.length === 0) {
                    document.getElementById("back").style.display = 'block';
                    document.getElementById("resultNotEmpty").style.display = 'none';
                }else {
                    document.getElementById("back").style.display = 'none';
                    document.getElementById("resultNotEmpty").style.display = 'block';
                }

                for (var i = 0; i < bookList.length; i++) {
                    tableData += "<div class=\"b_list\" >\n" +
                        "                <div class=\"img_div\">\n" +
                        "                    <img src=\"images/bookImg.png\" alt=\"\" >\n" +
                        "                </div>\n" +
                        "                <div class=\"book_info\">\n" +
                        "                    <div class=\"bookName\">书名: " + bookList[i].bookName + "</div>\n" +
                        "                    <div class=\"author\">作者: " + bookList[i].author + "</div>\n" +
                        "                    <div class=\"price\">价格: " + bookList[i].price + "</div>\n" +
                        "                    <div class=\"stock\">库存: " + bookList[i].stock + "</div>\n" +
                        "                    <div class=\"publisher\">出版社: " + bookList[i].publisher + "</div>\n" +
                        "                    <div class=\"bookId\">编号: " + bookList[i].bookId + "</div>\n" +
                        "                    <span><button value=\"书本详情\" class=\"btn1\"><a href=\"#\">  书 本 详 情  </a></button>\n" +
                        "                        <button value=\"加入购物车\" class=\"btn\" ><a href=\"#\">  加 入 购 物 车  </a></button>\n" +
                        "                    </span>\n" +
                        "                </div>\n" +
                        "            </div>"
                }

                // 设置表格内容
                document.getElementById("bookTable").innerHTML = tableData;


                //将page中的页码，总页数显示
                //pageNo
                var pageNo = document.getElementById("pageNo");
                pageNo.innerText = JSON.parse(sessionStorage.getItem("page")).pageNo;
                //pageCnt
                var pageCnt = document.getElementById("pageCnt");
                pageCnt.innerText = JSON.parse(sessionStorage.getItem("page")).pageCnt;


                //对每个btn添加属性"bookId", 目的：点击时可以获取该book的Id
                var btn = document.getElementsByClassName("btn");
                for (var i = 0; i < btn.length; i++) {
                    btn[i].setAttribute("bookId", bookList[i].bookId);
                }


                // 对点击“加入购车”btn做出判断
                var btn = document.getElementsByClassName("btn");
                for (var i = 0; i < btn.length; i++) {
                    btn[i].addEventListener("click", function () {
                        if (user == null) {
                            alert("请先登录！");
                        } else {
                            var bookId = this.getAttribute("bookId");
                            var cart = JSON.parse(sessionStorage.getItem("cart"));
                            axios({
                                url: "/addBookToCart",
                                method: 'post',
                                data: {
                                    "bookId": bookId,
                                    "cart": cart
                                }
                            }).then(resp => {
                                sessionStorage.setItem("cart", JSON.stringify(resp.data));
                                var items = resp.data.items
                                sessionStorage.setItem("lastName", JSON.stringify(items[bookId].name))
                                sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))

                                //购物车中书本的总数
                                var addBookSum = document.getElementById("addBookSum");
                                addBookSum.innerText = JSON.parse(sessionStorage.getItem("totalCnt"));

                                //购物车最后添加的书名
                                var addBookName = document.getElementById("addBookName");
                                addBookName.innerText = sessionStorage.getItem("lastName")

                                var cartIsEmpty = document.getElementById("cartIsEmpty");
                                var cartDetail = document.getElementById("cartDetail");
                                if (JSON.parse(sessionStorage.getItem("totalCnt") != null)) {
                                    cartDetail.style.display = 'block';
                                    cartIsEmpty.style.display = 'none';
                                }
                            })
                        }
                    })
                }

                //对每一个详情按钮绑定事件
                var btn1 = document.getElementsByClassName("btn1");
                for (var i = 0; i < btn1.length; i++) {
                    btn1[i].setAttribute("index", i);
                    btn1[i].addEventListener("click", function () {
                        var j = this.getAttribute("index")
                        document.getElementById("detailData").innerHTML = bookList[j].detail;
                        /*悬浮窗口的显示,需要将display变成block*/
                        document.querySelector(".bg_hoverWindow").style.display = "block"
                        document.getElementById("hoverWindow").style.display = "block";
                        /*将背景变暗*/
                        document.getElementById("window").setAttribute("class", "window_css");
                    })
                }
            })
        }
    })





    //对用户输入的页数进行判断是否合法
    var dp = document.getElementById("designatePage");
    let go = document.getElementById("go");
    go.addEventListener('click', function () {
        var pageNo = dp.value.replace(/\s*/g, "");
        var queryName = String(JSON.parse(sessionStorage.getItem("page")).queryName);
        queryName = queryName.replace(/%/g, " ");
        if (pageNo >= 1 && pageNo <= JSON.parse(sessionStorage.getItem("page")).pageCnt) {
            axios({
                url: "/getBooksByName?pageNo=" + pageNo + "&queryName=" + queryName,
                method: "get"
            }).then(resp => {
                sessionStorage.setItem("page", JSON.stringify(resp.data))

                var bookList = resp.data.item;
                var tableData = "";

                for (var i = 0; i < bookList.length; i++) {
                    tableData += "<div class=\"b_list\" >\n" +
                        "                <div class=\"img_div\">\n" +
                        "                    <img src=\"images/bookImg.png\" alt=\"\" >\n" +
                        "                </div>\n" +
                        "                <div class=\"book_info\">\n" +
                        "                    <div class=\"bookName\">书名: " + bookList[i].bookName + "</div>\n" +
                        "                    <div class=\"author\">作者: " + bookList[i].author + "</div>\n" +
                        "                    <div class=\"price\">价格: " + bookList[i].price + "</div>\n" +
                        "                    <div class=\"stock\">库存: " + bookList[i].stock + "</div>\n" +
                        "                    <div class=\"publisher\">出版社: " + bookList[i].publisher + "</div>\n" +
                        "                    <div class=\"bookId\">编号: " + bookList[i].bookId + "</div>\n" +
                        "                    <span><button value=\"书本详情\" class=\"btn1\"><a href=\"#\">  书 本 详 情  </a></button>\n" +
                        "                        <button value=\"加入购物车\" class=\"btn\" ><a href=\"#\">  加 入 购 物 车  </a></button>\n" +
                        "                    </span>\n" +
                        "                </div>\n" +
                        "            </div>"
                }

                // 设置表格内容
                document.getElementById("bookTable").innerHTML = tableData;


                //将page中的页码，总页数显示
                //pageNo
                var pageNo = document.getElementById("pageNo");
                pageNo.innerText = JSON.parse(sessionStorage.getItem("page")).pageNo;
                //pageCnt
                var pageCnt = document.getElementById("pageCnt");
                pageCnt.innerText = JSON.parse(sessionStorage.getItem("page")).pageCnt;


                //对每个btn添加属性"bookId", 目的：点击时可以获取该book的Id
                var btn = document.getElementsByClassName("btn");
                for (var i = 0; i < btn.length; i++) {
                    btn[i].setAttribute("bookId", bookList[i].bookId);
                }


                // 对点击“加入购车”btn做出判断
                var btn = document.getElementsByClassName("btn");
                for (var i = 0; i < btn.length; i++) {
                    btn[i].addEventListener("click", function () {
                        if (user == null) {
                            alert("请先登录！");
                        } else {
                            var bookId = this.getAttribute("bookId");
                            var cart = JSON.parse(sessionStorage.getItem("cart"));
                            axios({
                                url: "/addBookToCart",
                                method: 'post',
                                data: {
                                    "bookId": bookId,
                                    "cart": cart
                                }
                            }).then(resp => {
                                sessionStorage.setItem("cart", JSON.stringify(resp.data));
                                var items = resp.data.items
                                sessionStorage.setItem("lastName", JSON.stringify(items[bookId].name))
                                sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))

                                //购物车中书本的总数
                                var addBookSum = document.getElementById("addBookSum");
                                addBookSum.innerText = JSON.parse(sessionStorage.getItem("totalCnt"));

                                //购物车最后添加的书名
                                var addBookName = document.getElementById("addBookName");
                                addBookName.innerText = sessionStorage.getItem("lastName")

                                var cartIsEmpty = document.getElementById("cartIsEmpty");
                                var cartDetail = document.getElementById("cartDetail");
                                if (JSON.parse(sessionStorage.getItem("totalCnt") != null)) {
                                    cartDetail.style.display = 'block';
                                    cartIsEmpty.style.display = 'none';
                                }
                            })
                        }
                    })
                }

                //对每一个详情按钮绑定事件
                var btn1 = document.getElementsByClassName("btn1");
                for (var i = 0; i < btn1.length; i++) {
                    btn1[i].setAttribute("index", i);
                    btn1[i].addEventListener("click", function () {
                        var j = this.getAttribute("index")
                        document.getElementById("detailData").innerHTML = bookList[j].detail;
                        /*悬浮窗口的显示,需要将display变成block*/
                        document.getElementById("hoverWindow").style.display = "block";
                        document.querySelector(".bg_hoverWindow").style.display = "block"
                        /*将背景变暗*/
                        document.getElementById("window").setAttribute("class", "window_css");
                    })
                }
            })

        } else if (pageNo.length == 0) {
            alert(" 您还未输入页码！ ")
        } else {
            alert(" 输入的页码不合法！ ")
        }

    })


    var firstPage = document.getElementById("firstPage");
    firstPage.addEventListener("click", function () {
        var queryName = String(JSON.parse(sessionStorage.getItem("page")).queryName);
        queryName = queryName.replace(/%/g, " ");
        axios({
            url: "/getBooksByName?queryName=" + queryName + "&pageNo=1",
            method: 'get'
        }).then(resp => {
            sessionStorage.setItem("page", JSON.stringify(resp.data))
            var bookList = resp.data.item;
            var tableData = "";

            for (var i = 0; i < bookList.length; i++) {
                tableData += "<div class=\"b_list\" >\n" +
                    "                <div class=\"img_div\">\n" +
                    "                    <img src=\"images/bookImg.png\" alt=\"\" >\n" +
                    "                </div>\n" +
                    "                <div class=\"book_info\">\n" +
                    "                    <div class=\"bookName\">书名: " + bookList[i].bookName + "</div>\n" +
                    "                    <div class=\"author\">作者: " + bookList[i].author + "</div>\n" +
                    "                    <div class=\"price\">价格: " + bookList[i].price + "</div>\n" +
                    "                    <div class=\"stock\">库存: " + bookList[i].stock + "</div>\n" +
                    "                    <div class=\"publisher\">出版社: " + bookList[i].publisher + "</div>\n" +
                    "                    <div class=\"bookId\">编号: " + bookList[i].bookId + "</div>\n" +
                    "                    <span><button value=\"书本详情\" class=\"btn1\"><a href=\"#\">  书 本 详 情  </a></button>\n" +
                    "                        <button value=\"加入购物车\" class=\"btn\" ><a href=\"#\">  加 入 购 物 车  </a></button>\n" +
                    "                    </span>\n" +
                    "                </div>\n" +
                    "            </div>"
            }

            // 设置表格内容
            document.getElementById("bookTable").innerHTML = tableData;


            //将page中的页码，总页数显示
            //pageNo
            var pageNo = document.getElementById("pageNo");
            pageNo.innerText = JSON.parse(sessionStorage.getItem("page")).pageNo;
            //pageCnt
            var pageCnt = document.getElementById("pageCnt");
            pageCnt.innerText = JSON.parse(sessionStorage.getItem("page")).pageCnt;


            //对每个btn添加属性"bookId", 目的：点击时可以获取该book的Id
            var btn = document.getElementsByClassName("btn");
            for (var i = 0; i < btn.length; i++) {
                btn[i].setAttribute("bookId", bookList[i].bookId);
            }


            // 对点击“加入购车”btn做出判断
            var btn = document.getElementsByClassName("btn");
            for (var i = 0; i < btn.length; i++) {
                btn[i].addEventListener("click", function () {
                    if (user == null) {
                        alert("请先登录！");
                    } else {
                        var bookId = this.getAttribute("bookId");
                        var cart = JSON.parse(sessionStorage.getItem("cart"));
                        axios({
                            url: "/addBookToCart",
                            method: 'post',
                            data: {
                                "bookId": bookId,
                                "cart": cart
                            }
                        }).then(resp => {
                            sessionStorage.setItem("cart", JSON.stringify(resp.data));
                            var items = resp.data.items
                            sessionStorage.setItem("lastName", JSON.stringify(items[bookId].name))
                            sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))

                            //购物车中书本的总数
                            var addBookSum = document.getElementById("addBookSum");
                            addBookSum.innerText = JSON.parse(sessionStorage.getItem("totalCnt"));

                            //购物车最后添加的书名
                            var addBookName = document.getElementById("addBookName");
                            addBookName.innerText = sessionStorage.getItem("lastName")

                            var cartIsEmpty = document.getElementById("cartIsEmpty");
                            var cartDetail = document.getElementById("cartDetail");
                            if (JSON.parse(sessionStorage.getItem("totalCnt") != null)) {
                                cartDetail.style.display = 'block';
                                cartIsEmpty.style.display = 'none';
                            }
                        })
                    }
                })
            }

            //对每一个详情按钮绑定事件
            var btn1 = document.getElementsByClassName("btn1");
            for (var i = 0; i < btn1.length; i++) {
                btn1[i].setAttribute("index", i);
                btn1[i].addEventListener("click", function () {
                    var j = this.getAttribute("index")
                    document.getElementById("detailData").innerHTML = bookList[j].detail;
                    /*悬浮窗口的显示,需要将display变成block*/
                    document.getElementById("hoverWindow").style.display = "block";
                    document.querySelector(".bg_hoverWindow").style.display = "block"
                    /*将背景变暗*/
                    document.getElementById("window").setAttribute("class", "window_css");
                })
            }
        })
    })


    //对尾页按钮添加点击事件
    var lastPage = document.getElementById("lastPage");
    lastPage.addEventListener('click', function () {
        var queryName = String(JSON.parse(sessionStorage.getItem("page")).queryName);
        queryName = queryName.replace(/%/g, " ");
        var pageCnt = JSON.parse(sessionStorage.getItem("page")).pageCnt;
        axios({
            url: "/getBooksByName?queryName=" + queryName + "&pageNo=" + pageCnt,
            method: 'get'
        }).then(resp => {
            sessionStorage.setItem("page", JSON.stringify(resp.data))
            var bookList = resp.data.item;
            var tableData = "";

            for (var i = 0; i < bookList.length; i++) {
                tableData += "<div class=\"b_list\" >\n" +
                    "                <div class=\"img_div\">\n" +
                    "                    <img src=\"images/bookImg.png\" alt=\"\" >\n" +
                    "                </div>\n" +
                    "                <div class=\"book_info\">\n" +
                    "                    <div class=\"bookName\">书名: " + bookList[i].bookName + "</div>\n" +
                    "                    <div class=\"author\">作者: " + bookList[i].author + "</div>\n" +
                    "                    <div class=\"price\">价格: " + bookList[i].price + "</div>\n" +
                    "                    <div class=\"stock\">库存: " + bookList[i].stock + "</div>\n" +
                    "                    <div class=\"publisher\">出版社: " + bookList[i].publisher + "</div>\n" +
                    "                    <div class=\"bookId\">编号: " + bookList[i].bookId + "</div>\n" +
                    "                    <span><button value=\"书本详情\" class=\"btn1\"><a href=\"#\">  书 本 详 情  </a></button>\n" +
                    "                        <button value=\"加入购物车\" class=\"btn\" ><a href=\"#\">  加 入 购 物 车  </a></button>\n" +
                    "                    </span>\n" +
                    "                </div>\n" +
                    "            </div>"
            }

            // 设置表格内容
            document.getElementById("bookTable").innerHTML = tableData;


            // console.log(JSON.parse(sessionStorage.getItem("page")).pageNo);

            //将page中的页码，总页数显示
            //pageNo
            var pageNo = document.getElementById("pageNo");
            pageNo.innerText = JSON.parse(sessionStorage.getItem("page")).pageNo;
            //pageCnt
            var pageCnt = document.getElementById("pageCnt");
            pageCnt.innerText = JSON.parse(sessionStorage.getItem("page")).pageCnt;


            //对每个btn添加属性"bookId", 目的：点击时可以获取该book的Id
            var btn = document.getElementsByClassName("btn");
            for (var i = 0; i < btn.length; i++) {
                btn[i].setAttribute("bookId", bookList[i].bookId);
            }


            // 对点击“加入购车”btn做出判断
            var btn = document.getElementsByClassName("btn");
            for (var i = 0; i < btn.length; i++) {
                btn[i].addEventListener("click", function () {
                    if (user == null) {
                        alert("请先登录！");
                    } else {
                        var bookId = this.getAttribute("bookId");
                        var cart = JSON.parse(sessionStorage.getItem("cart"));
                        axios({
                            url: "/addBookToCart",
                            method: 'post',
                            data: {
                                "bookId": bookId,
                                "cart": cart
                            }
                        }).then(resp => {
                            sessionStorage.setItem("cart", JSON.stringify(resp.data));
                            var items = resp.data.items
                            sessionStorage.setItem("lastName", JSON.stringify(items[bookId].name))
                            sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))

                            //购物车中书本的总数
                            var addBookSum = document.getElementById("addBookSum");
                            addBookSum.innerText = JSON.parse(sessionStorage.getItem("totalCnt"));

                            //购物车最后添加的书名
                            var addBookName = document.getElementById("addBookName");
                            addBookName.innerText = sessionStorage.getItem("lastName")

                            var cartIsEmpty = document.getElementById("cartIsEmpty");
                            var cartDetail = document.getElementById("cartDetail");
                            if (JSON.parse(sessionStorage.getItem("totalCnt") != null)) {
                                cartDetail.style.display = 'block';
                                cartIsEmpty.style.display = 'none';
                            }
                        })
                    }
                })
            }

            //对每一个详情按钮绑定事件
            var btn1 = document.getElementsByClassName("btn1");
            for (var i = 0; i < btn1.length; i++) {
                btn1[i].setAttribute("index", i);
                btn1[i].addEventListener("click", function () {
                    console.log(j);
                    document.getElementById("detailData").innerHTML = bookList[j].detail;
                    /*悬浮窗口的显示,需要将display变成block*/
                    document.getElementById("hoverWindow").style.display = "block";
                    document.querySelector(".bg_hoverWindow").style.display = "block"
                    /*将背景变暗*/
                    document.getElementById("window").setAttribute("class", "window_css");
                })
            }
        })
    })


    var prePage = document.getElementById('prePage');
    prePage.addEventListener('click', function () {
        var pageCnt = JSON.parse(sessionStorage.getItem("page")).pageCnt;
        var pageNo = JSON.parse(sessionStorage.getItem("page")).pageNo;
        if (pageNo - 1 <= 0) {
            alert("目前在第一页！")
        } else {
            var queryName = String(JSON.parse(sessionStorage.getItem("page")).queryName);
            queryName = queryName.replace(/%/g, " ");
            axios({
                url: "/getBooksByName?queryName=" + queryName + "&pageNo=" + (pageNo - 1),
                method: 'get'
            }).then(resp => {
                sessionStorage.setItem("page", JSON.stringify(resp.data))
                var bookList = resp.data.item;
                var tableData = "";

                for (var i = 0; i < bookList.length; i++) {
                    tableData += "<div class=\"b_list\" >\n" +
                        "                <div class=\"img_div\">\n" +
                        "                    <img src=\"images/bookImg.png\" alt=\"\" >\n" +
                        "                </div>\n" +
                        "                <div class=\"book_info\">\n" +
                        "                    <div class=\"bookName\">书名: " + bookList[i].bookName + "</div>\n" +
                        "                    <div class=\"author\">作者: " + bookList[i].author + "</div>\n" +
                        "                    <div class=\"price\">价格: " + bookList[i].price + "</div>\n" +
                        "                    <div class=\"stock\">库存: " + bookList[i].stock + "</div>\n" +
                        "                    <div class=\"publisher\">出版社: " + bookList[i].publisher + "</div>\n" +
                        "                    <div class=\"bookId\">编号: " + bookList[i].bookId + "</div>\n" +
                        "                    <span><button value=\"书本详情\" class=\"btn1\"><a href=\"#\">  书 本 详 情  </a></button>\n" +
                        "                        <button value=\"加入购物车\" class=\"btn\" ><a href=\"#\">  加 入 购 物 车  </a></button>\n" +
                        "                    </span>\n" +
                        "                </div>\n" +
                        "            </div>"
                }

                // 设置表格内容
                document.getElementById("bookTable").innerHTML = tableData;

                //将page中的页码，总页数显示
                //pageNo
                var pageNo = document.getElementById("pageNo");
                pageNo.innerText = JSON.parse(sessionStorage.getItem("page")).pageNo;
                //pageCnt
                var pageCnt = document.getElementById("pageCnt");
                pageCnt.innerText = JSON.parse(sessionStorage.getItem("page")).pageCnt;


                //对每个btn添加属性"bookId", 目的：点击时可以获取该book的Id
                var btn = document.getElementsByClassName("btn");
                for (var i = 0; i < btn.length; i++) {
                    btn[i].setAttribute("bookId", bookList[i].bookId);
                }


                // 对点击“加入购车”btn做出判断
                var btn = document.getElementsByClassName("btn");
                for (var i = 0; i < btn.length; i++) {
                    btn[i].addEventListener("click", function () {
                        if (user == null) {
                            alert("请先登录！");
                        } else {
                            var bookId = this.getAttribute("bookId");
                            var cart = JSON.parse(sessionStorage.getItem("cart"));
                            axios({
                                url: "/addBookToCart",
                                method: 'post',
                                data: {
                                    "bookId": bookId,
                                    "cart": cart
                                }
                            }).then(resp => {
                                sessionStorage.setItem("cart", JSON.stringify(resp.data));
                                var items = resp.data.items
                                sessionStorage.setItem("lastName", JSON.stringify(items[bookId].name))
                                sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))

                                //购物车中书本的总数
                                var addBookSum = document.getElementById("addBookSum");
                                addBookSum.innerText = JSON.parse(sessionStorage.getItem("totalCnt"));

                                //购物车最后添加的书名
                                var addBookName = document.getElementById("addBookName");
                                addBookName.innerText = sessionStorage.getItem("lastName")

                                var cartIsEmpty = document.getElementById("cartIsEmpty");
                                var cartDetail = document.getElementById("cartDetail");
                                if (JSON.parse(sessionStorage.getItem("totalCnt") != null)) {
                                    cartDetail.style.display = 'block';
                                    cartIsEmpty.style.display = 'none';
                                }
                            })
                        }
                    })
                }

                //对每一个详情按钮绑定事件
                var btn1 = document.getElementsByClassName("btn1");
                for (var i = 0; i < btn1.length; i++) {
                    btn1[i].setAttribute("index", i);
                    btn1[i].addEventListener("click", function () {
                        var j = this.getAttribute("index")
                        document.getElementById("detailData").innerHTML = bookList[j].detail;
                        /*悬浮窗口的显示,需要将display变成block*/
                        document.getElementById("hoverWindow").style.display = "block";
                        document.querySelector(".bg_hoverWindow").style.display = "block"
                        /*将背景变暗*/
                        document.getElementById("window").setAttribute("class", "window_css");
                    })
                }
            })
        }
    })


    var nextPage = document.getElementById("nextPage");
    nextPage.addEventListener('click', function () {
        var pageCnt = JSON.parse(sessionStorage.getItem("page")).pageCnt;
        var pageNo = JSON.parse(sessionStorage.getItem("page")).pageNo;
        if (pageNo + 1 > pageCnt) {
            alert("目前在最后一页！")
        } else {
            var queryName = String(JSON.parse(sessionStorage.getItem("page")).queryName);
            queryName = queryName.replace(/%/g, " ");
            axios({
                url: "/getBooksByName?queryName=" + queryName + "&pageNo=" + (pageNo + 1),
                method: 'get'
            }).then(resp => {
                sessionStorage.setItem("page", JSON.stringify(resp.data))
                var bookList = resp.data.item;
                var tableData = "";

                for (var i = 0; i < bookList.length; i++) {
                    tableData += "<div class=\"b_list\" >\n" +
                        "                <div class=\"img_div\">\n" +
                        "                    <img src=\"images/bookImg.png\" alt=\"\" >\n" +
                        "                </div>\n" +
                        "                <div class=\"book_info\">\n" +
                        "                    <div class=\"bookName\">书名: " + bookList[i].bookName + "</div>\n" +
                        "                    <div class=\"author\">作者: " + bookList[i].author + "</div>\n" +
                        "                    <div class=\"price\">价格: " + bookList[i].price + "</div>\n" +
                        "                    <div class=\"stock\">库存: " + bookList[i].stock + "</div>\n" +
                        "                    <div class=\"publisher\">出版社: " + bookList[i].publisher + "</div>\n" +
                        "                    <div class=\"bookId\">编号: " + bookList[i].bookId + "</div>\n" +
                        "                    <span><button value=\"书本详情\" class=\"btn1\"><a href=\"#\">  书 本 详 情  </a></button>\n" +
                        "                        <button value=\"加入购物车\" class=\"btn\" ><a href=\"#\">  加 入 购 物 车  </a></button>\n" +
                        "                    </span>\n" +
                        "                </div>\n" +
                        "            </div>"
                }

                // 设置表格内容
                document.getElementById("bookTable").innerHTML = tableData;

                //将page中的页码，总页数显示
                //pageNo
                var pageNo = document.getElementById("pageNo");
                pageNo.innerText = JSON.parse(sessionStorage.getItem("page")).pageNo;
                //pageCnt
                var pageCnt = document.getElementById("pageCnt");
                pageCnt.innerText = JSON.parse(sessionStorage.getItem("page")).pageCnt;


                //对每个btn添加属性"bookId", 目的：点击时可以获取该book的Id
                var btn = document.getElementsByClassName("btn");
                for (var i = 0; i < btn.length; i++) {
                    btn[i].setAttribute("bookId", bookList[i].bookId);
                }


                // 对点击“加入购车”btn做出判断
                var btn = document.getElementsByClassName("btn");
                for (var i = 0; i < btn.length; i++) {
                    btn[i].addEventListener("click", function () {
                        if (user == null) {
                            alert("请先登录！");
                        } else {
                            var bookId = this.getAttribute("bookId");
                            var cart = JSON.parse(sessionStorage.getItem("cart"));
                            axios({
                                url: "/addBookToCart",
                                method: 'post',
                                data: {
                                    "bookId": bookId,
                                    "cart": cart
                                }
                            }).then(resp => {
                                sessionStorage.setItem("cart", JSON.stringify(resp.data));
                                var items = resp.data.items
                                sessionStorage.setItem("lastName", JSON.stringify(items[bookId].name))
                                sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))

                                //购物车中书本的总数
                                var addBookSum = document.getElementById("addBookSum");
                                addBookSum.innerText = JSON.parse(sessionStorage.getItem("totalCnt"));

                                //购物车最后添加的书名
                                var addBookName = document.getElementById("addBookName");
                                addBookName.innerText = sessionStorage.getItem("lastName")

                                var cartIsEmpty = document.getElementById("cartIsEmpty");
                                var cartDetail = document.getElementById("cartDetail");
                                if (JSON.parse(sessionStorage.getItem("totalCnt") != null)) {
                                    cartDetail.style.display = 'block';
                                    cartIsEmpty.style.display = 'none';
                                }
                            })
                        }
                    })
                }

                //对每一个详情按钮绑定事件
                var btn1 = document.getElementsByClassName("btn1");
                for (var i = 0; i < btn1.length; i++) {
                    btn1[i].setAttribute("index", i);
                    btn1[i].addEventListener("click", function () {
                        var j = this.getAttribute("index")
                        console.log(j);
                        document.getElementById("detailData").innerHTML = bookList[j].detail;
                        /*悬浮窗口的显示,需要将display变成block*/
                        document.getElementById("hoverWindow").style.display = "block";
                        document.querySelector(".bg_hoverWindow").style.display = "block"
                        /*将背景变暗*/
                        document.getElementById("window").setAttribute("class", "window_css");
                    })
                }
            })
        }
    })


</script>

</body>
</html>